<template>
  <div class="component component-length">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">长度单位转换</h2>
      </div>
      <div class="row">
        <div class="col-xs-6 row-cell">
          <form class="form-table">
            <div class="form-group" v-for="(item, i) in units" :key="item.name">
              <div class="form-label form-label-md"><label>{{item.name}}</label></div>
              <div class="form-wall">
                <div class="form-field"><input class="form-input" type="text" v-model="item.value"></div>
              </div>
              <div class="form-label"><a class="btn btn-theme" @click="transform(i, item.value)">转换</a></div>
            </div>
          </form>
        </div>
        <div class="col-xs-6 row-cell text-gray">
          <div class="text-left">
            <a class="btn btn-default mt-xs" @click="reset">重置</a>
          </div>
          <h4 class="text-left">长度单位转换说明</h4>
          <p>1千米(km)= 0.621英里(mile)</p>
          <p>1米(m)= 3.281英尺(ft)= 1.094码(yd)</p>
          <p>1丝米(dmm)=10忽米(cmm)=10丝=0.01毫米=0.001厘米</p>
          <p>1厘米(cm)= 0.394英寸(in)</p>
          <p>1厘米（cm)=10毫米（mm)</p>
          <p>1,000,000,000纳米 = 1米（m）</p>
          <p>1,000,000纳米 = 1毫米（mm）</p>
          <p>1,000纳米 = 1微米（µm）</p>
          <p>1纳米 = 10 埃米（记为Å）</p>
          <p>1埃米=10^-10m</p>
          <p>1埃(A)= 10米(m)</p>
          <p>1英里(mile)= 1.609千米(km)</p>
          <p>1英寻(fm)= 1.829(m) 1英尺(ft)= 0.3048米(m)</p>
          <p>1英寸(in)= 2.54厘米(cm)</p>
          <p>1海里(n mile)= 1.852千米(km)</p>
          <p>1链= 66英尺(ft)= 20.1168米 1码(yd)= 0.9144米(m)</p>
          <p>1密耳(mil)= 0.0254毫米(mm)</p>
          <p>1英尺(ft)= 12英寸(in)</p>
          <p>1码(yd)= 3英尺(ft) 1杆(rad)= 16.5英尺(ft)</p>
          <p>1英里(mile)= 5280英尺(ft)</p>
          <p>1海里(n mile)= 1.1516英里(mile)</p>
          <p>市制计量单位：</p>
          <p>1里=150丈 1丈=10尺 1尺=10寸 1寸=10分 1分=10厘 1厘=10毫</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchRich from '@/components/vue/components/switch-rich/2.0/switch-rich.vue'
import Pipe from '../index/pipe.vue'

/* 字符替换 */
export default {
  components: {
    SwitchRich,
    Pipe
  },

  data () {
    return {
      inputData: '',
      outputData: '',
      units: [
        {name: '公里（km）', unit: 0.001, value: 0},
        {name: '米（m）', unit: 1, value: 0},
        {name: '分米（dm）', unit: 10, value: 0},
        {name: '厘米（cm）', unit: 100, value: 0},
        {name: '毫米（mm）', unit: 1000, value: 0},
        {name: '丝（dmm）', unit: 10000, value: 0},
        {name: '微米（um）', unit: 1000000, value: 0},
        {name: '里', unit: 0.002, value: 0},
        {name: '丈', unit: 0.3, value: 0},
        {name: '尺', unit: 3, value: 0},
        {name: '寸', unit: 30, value: 0},
        {name: '分', unit: 300, value: 0},
        {name: '厘', unit: 3000, value: 0},
        {name: '海里（nmi）', unit: 0.00054, value: 0},
        {name: '英寻', unit: 0.5468066, value: 0},
        {name: '英里（mi）', unit: 0.0006214, value: 0},
        {name: '弗隆（fur）', unit: 0.004971, value: 0},
        {name: '码（yd）', unit: 1.0936133, value: 0},
        {name: '英尺（ft）', unit: 3.2808399, value: 0},
        {name: '英寸（in）', unit: 39.3700787, value: 0},
        {name: '纳米（nm）', unit: 1000000000, value: 0}
      ]
    }
  },

  methods: {
    /**
     * @function 长度值转换
     * @param {Int} n 单位索引
     * @param {String} num 值
    */
    transform (n, num) {
      if (num !== '' && !isNaN(num)) {
        this.units.forEach(item => {
          item.value = item.unit * num / this.units[n].unit
        })
      }
    },

    /**
     * @function 重置
    */
    reset () {
      this.units.forEach(item => {
        item.value = 0
      })
    }
  }
}
</script>

<style lang="less">
.component-length{
  .form-label-md {
    width: 120px
  }
}
</style>
